<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HarmonyOS 底部标签栏示例</title>
  <link rel="stylesheet" href="../dist/harmony-style.css">
  <link rel="stylesheet" href="common-styles.css">
  <style>
    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }
    
    .content {
      flex: 1;
      padding: calc(24 * var(--unit));
      overflow-y: auto;
      padding-bottom: calc(var(--tab-height) + calc(24 * var(--unit)));
    }
    
    .container {
      max-width: 800px;
    }
    
    /* 隐藏默认的底部标签栏，用于示例切换 */
    .tab-example.hidden {
      display: none !important;
    }
    
    .feature-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .feature-list li {
      padding: calc(8 * var(--unit)) 0;
      border-bottom: 1px solid var(--color-comp-divider);
    }
    
    .feature-list li:last-child {
      border-bottom: none;
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="container">
      <div class="example-section">
        <h1 class="title title-large mb-medium">HarmonyOS 底部标签栏组件示例</h1>
        <p class="text text-secondary">这个示例展示了基于华为HarmonyOS设计指南实现的底部标签栏组件的多种用法和样式变体。</p>
      </div>
      
    <div class="example-section">
      <h2 class="example-section-title">组件功能切换</h2>
        <div class="button-group">
          <button class="button button-primary" id="showDefault">默认样式</button>
          <button class="button button-secondary" id="showBlur">模糊背景</button>
          <button class="button button-secondary" id="showOperation">运营标签</button>
          <button class="button button-secondary" id="showImmersive">沉浸式</button>
        </div>
      </div>
      
    <div class="example-section">
      <h2 class="example-section-title">使用说明</h2>
        <p class="text mb-medium">底部标签栏是移动应用中常见的导航模式，通常包含3-5个主要功能入口。本组件支持以下特性：</p>
        <ul class="feature-list">
          <li class="text">支持图标和文字组合显示</li>
          <li class="text">激活状态视觉反馈</li>
          <li class="text">徽章提示（数字和红点）</li>
          <li class="text">系统导航条自动避让</li>
          <li class="text">模糊背景效果</li>
          <li class="text">深色模式适配</li>
          <li class="text">平板横屏响应式布局</li>
          <li class="text">4+1运营模式支持</li>
          <li class="text">沉浸式导航样式</li>
        </ul>
      </div>
    </div>
  </div>
  
  <!-- 默认样式的底部标签栏 -->
  <div class="bottom-tab-container tab-example" id="defaultTab">
    <div class="tab-item active">
      <svg class="tab-icon active" viewBox="0 0 24 24" fill="currentColor">
        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
      </svg>
      <span class="tab-text active">首页</span>
    </div>
    
    <div class="tab-item">
      <svg class="tab-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
      </svg>
      <span class="tab-text">发现</span>
      <div class="tab-badge">3</div>
    </div>
    
    <div class="tab-item">
      <svg class="tab-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
      </svg>
      <span class="tab-text">消息</span>
      <div class="tab-badge overflow">99+</div>
    </div>
    
    <div class="tab-item">
      <svg class="tab-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
      </svg>
      <span class="tab-text">我的</span>
    </div>
  </div>
  
  <!-- 模糊背景样式的底部标签栏 -->
  <div class="bottom-tab-container blur-enabled tab-example hidden" id="blurTab">
    <div class="tab-item">
      <svg class="tab-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
      </svg>
      <span class="tab-text">首页</span>
    </div>
    
    <div class="tab-item active">
      <svg class="tab-icon active" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
      </svg>
      <span class="tab-text active">发现</span>
    </div>
    
    <div class="tab-item">
      <svg class="tab-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
      </svg>
      <span class="tab-text">消息</span>
      <div class="tab-badge dot"></div>
    </div>
    
    <div class="tab-item">
      <svg class="tab-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
      </svg>
      <span class="tab-text">我的</span>
    </div>
  </div>
  
  <!-- 带运营标签的底部标签栏 -->
  <div class="bottom-tab-container tab-example hidden" id="operationTab">
    <div class="tab-item">
      <svg class="tab-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
      </svg>
      <span class="tab-text">首页</span>
    </div>
    
    <div class="tab-item">
      <svg class="tab-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
      </svg>
      <span class="tab-text">发现</span>
    </div>
    
    <div class="tab-item operation-tab active" aria-label="运营标签">
      <svg class="tab-icon active" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
      </svg>
    </div>
    
    <div class="tab-item">
      <svg class="tab-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
      </svg>
      <span class="tab-text">消息</span>
    </div>
    
    <div class="tab-item">
      <svg class="tab-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
      </svg>
      <span class="tab-text">我的</span>
    </div>
  </div>
  
  <!-- 沉浸式样式的底部标签栏 -->
  <div class="bottom-tab-container immersive tab-example hidden" id="immersiveTab">
    <div class="tab-item">
      <svg class="tab-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
      </svg>
      <span class="tab-text">首页</span>
    </div>
    
    <div class="tab-item">
      <svg class="tab-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
      </svg>
      <span class="tab-text">发现</span>
    </div>
    
    <div class="tab-item active">
      <svg class="tab-icon active" viewBox="0 0 24 24" fill="currentColor">
        <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
      </svg>
      <span class="tab-text active">消息</span>
      <div class="tab-badge">5</div>
    </div>
    
    <div class="tab-item">
      <svg class="tab-icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
      </svg>
      <span class="tab-text">我的</span>
    </div>
  </div>
  
  <script>
    // 示例切换功能
    const showDefaultBtn = document.getElementById('showDefault');
    const showBlurBtn = document.getElementById('showBlur');
    const showOperationBtn = document.getElementById('showOperation');
    const showImmersiveBtn = document.getElementById('showImmersive');
    
    const tabExamples = document.querySelectorAll('.tab-example');
    
    function showTabExample(tabId) {
      tabExamples.forEach(tab => {
        tab.classList.add('hidden');
      });
      const targetTab = document.getElementById(tabId);
      if (targetTab) {
        targetTab.classList.remove('hidden');
        
        // 更新按钮状态
        [showDefaultBtn, showBlurBtn, showOperationBtn, showImmersiveBtn].forEach(btn => {
          btn.classList.remove('button-primary');
          btn.classList.add('button-secondary');
        });
        const activeBtn = document.getElementById('show' + tabId.replace('Tab', ''));
        if (activeBtn) {
          activeBtn.classList.remove('button-secondary');
          activeBtn.classList.add('button-primary');
        }
      }
    }
    
    showDefaultBtn?.addEventListener('click', () => showTabExample('defaultTab'));
    showBlurBtn?.addEventListener('click', () => showTabExample('blurTab'));
    showOperationBtn?.addEventListener('click', () => showTabExample('operationTab'));
    showImmersiveBtn?.addEventListener('click', () => showTabExample('immersiveTab'));
    
    // 标签项点击交互
    document.querySelectorAll('.tab-item').forEach(item => {
      item.addEventListener('click', function() {
        // 在同一容器内移除其他标签的激活状态
        const container = this.closest('.bottom-tab-container');
        if (!container) return;
        
        container.querySelectorAll('.tab-item').forEach(tab => {
          tab.classList.remove('active');
          const icon = tab.querySelector('.tab-icon');
          const text = tab.querySelector('.tab-text');
          if (icon) icon.classList.remove('active', 'active-animation');
          if (text) text.classList.remove('active');
        });
        
        // 添加当前标签的激活状态
        this.classList.add('active');
        const icon = this.querySelector('.tab-icon');
        const text = this.querySelector('.tab-text');
        if (icon) {
          icon.classList.add('active', 'active-animation');
          // 动画结束后移除动画类
          setTimeout(() => {
            icon.classList.remove('active-animation');
          }, 300);
        }
        if (text) text.classList.add('active');
      });
    });
    
    // 初始化：设置默认按钮为激活状态
    if (showDefaultBtn) {
      showDefaultBtn.classList.remove('button-secondary');
      showDefaultBtn.classList.add('button-primary');
    }
  </script>
</body>
</html>